<script setup lang="ts"></script>
<template>
  <div class="message-details">
    <div class="message-details-wu">
      <div class="message-details-top">
        <div class="message-details-top-img">
          <img src="@/static/images/image.png" alt="" />
        </div>
        <view>圈层物联 . 充电桩服务</view>
        <text>-150.00</text>
      </div>
      <div class="message-details-footer">
        <ul class="message-details-footer-name">
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 30rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">当前状态</p>
            <p style="flex: 8; word-break: break-all">支付成功</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 30rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">商品</p>
            <p style="flex: 8; word-break: break-all">
              充电桩订单-1912061010000000000000000325602225309
            </p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 30rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">商户全称</p>
            <p style="flex: 8; word-break: break-all">
              广州锐敏信息科技有限公司
            </p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 30rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">支付时间</p>
            <p style="flex: 8; word-break: break-all">2019-12-06 20:11:23</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 30rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">支付方式</p>
            <p style="flex: 8; word-break: break-all">零钱</p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 30rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">交易单号</p>
            <p style="flex: 8; word-break: break-all">
              42000000466325236619120631866327011
            </p>
          </li>
          <li
            style="
              display: flex;
              flex-wrap: nowrap;
              justify-content: space-around;
              margin-bottom: 30rpx;
            "
          >
            <p style="flex: 2; color: #807c7c">商户单号</p>
            <p style="flex: 8; word-break: break-all">
              191206101000000000000385622747422335029
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="less">
.message-details {
  width: 100vw;
  height: 100vh;
  background-color: #e0e7f0;
  .message-details-wu {
    height: 1100rpx;
    background-color: #fff;
    .message-details-top {
      height: 400rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      .message-details-top-img {
        image {
          width: 200rpx;
          height: 180rpx;
        }
      }
      view {
        font-size: 36rpx;
        font-weight: 700;
      }
      text {
        color: #db403f;
        font-size: 36rpx;
        font-weight: 700;
      }
    }
    .message-details-footer {
      height: 600rpx;
      padding-top: 30rpx;
      padding-left: 30rpx;
      padding-right: 30rpx;
      display: flex;
      justify-content: space-around;
      .message-details-footer-name {
        font-size: 24rpx;
      }
    }
  }
}
</style>
